<!--
 * @FilePath: ClassifyModule.vue
 * @Author: jack
 * @Date: 2024-05-14 11:58:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-28 14:50:13
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <Model title="模块分类" :modelShow="props.classifyModelShow" width="680px" @cancel="Cancel(ruleFormRef)"
        @confirm="Confirm(ruleFormRef)">
        <el-form :model="ruleForm" ref="ruleFormRef" label-width="82px" status-icon>
            <el-row :gutter="10">
                <el-col :span="24" v-for="(item, index) in ruleForm.list" :key="index" :prop="`${item.prop}.name`"
                    :rules="item.rules">
                    <el-form-item label="标题名称" prop="name">
                        <el-input clearable placeholder="请输入标题名称" v-model="item.name">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </Model>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import type { FormInstance, FormRules, UploadInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { batchType } from '../Api/index'
interface PropsType {
    // 是否显示弹窗
    classifyModelShow?: boolean
    leftMenu?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    classifyModelShow: false,
    leftMenu: [],
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'CancelModule'): void
    (e: 'typeListConfig'): void
}
watch(
    () => props.classifyModelShow,
    (newValue, oldValue) => {
        if (props.classifyModelShow) {
            ruleForm.list = JSON.parse(JSON.stringify(props.leftMenu))
        }
    },
    { deep: true }
)
const ruleForm = reactive<any>({
    list: []
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入大屏名称', trigger: 'blur' }],
})
const Cancel = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    emit('CancelModule')
}
// 点击确定编辑或者新增
const Confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: any) => {
        if (valid) {
            let arr: any = []
            ruleForm.list.forEach((item:any) => {
                arr.push({
                    id:item.id,
                    name:item.name,
                })
            })
            const res: any = await batchType({ updata: arr })
            if (res.code !== 1) return ElMessage.error(res.message)
            ElMessage.success(res.message)
            emit('CancelModule')
            emit('typeListConfig')
            formEl.resetFields()
        } else {
            console.log('error submit!')
        }
    })
}
onMounted(() => {
})
</script>
<style lang="scss" scoped></style>